<template>
	<div>
    <centerHeader :title="header"></centerHeader>
    <div class="form">
      <el-form ref="form" :model="form" label-width="100px" >
        
        <el-form-item label="任务名称" >
          <el-col :span="16">
          <el-input v-model="form.name" clearable></el-input>
          </el-col>
        </el-form-item>
          <el-form-item label="">
         <div style="margin-bottom: 22px;">
          <div style="background:#eee; padding:10px;line-height:20px">
            <div class="template-msg-editor">
                <p>
                  {{OneGraphic.title}}
                  <i class="el-icon-edit" @click="changetitle(-1)"></i>
                </p>
                <p class="one_p">
                   <img :src="OneGraphic.picurl" alt="" class="one_img">
                   <span class="one_p_span">
                     <span @click="changeimg(-1)">更换图片</span>
                   </span>
                </p>
                <p v-show="OneGraphicList.length==0">
                  阅读全文<i class="el-icon-arrow-right"></i>
                </p>
                <p v-for="(item,index) in OneGraphicList" :key="index" class="list_p">
                  <span>
                   {{item.title}}
                  <i class="el-icon-edit" @click="changetitle(index)"></i>
                  <i class="el-icon-delete" @click="OneGraphicList.splice(index,1);"></i>
                  <br>
                  <span :class="item.url?'':'textred'" class="textis">
                   {{item.url?item.url:'链接未配置'}}  
                  </span>
                  </span>
                  <span class="list_span">
                    <img :src="item.picurl" alt="">
                    <span class="list_span_span">
                     <span @click="changeimg(index)">更换</span>
                   </span>
                  </span>
                </p>
            </div>
            <p class="addci" v-show="OneGraphicList.length<7">
              <span @click="getOneGraphic(true)">
                <i class="el-icon-plus"></i>添加次条
              </span>
            </p>
          </div>
        </div>
        </el-form-item>
        <el-form-item label="头条链接">
          <el-col :span="16">
           <el-autocomplete
            class="inline-input"
            v-model="form.titleurl"
            :fetch-suggestions="querySearch"
            placeholder="请输入原文链接"
            @select="handleSelect"
          ></el-autocomplete>
          </el-col>
        </el-form-item>
        
        <el-form-item label="发送用户">
          <el-radio-group v-model="form.send_type">
            <el-radio label="全部用户"></el-radio>
            <el-radio label="付费用户"></el-radio>
          </el-radio-group>
        </el-form-item>
    <el-form-item label="发送时间">    
        <el-date-picker
      v-model="form.send_time"
      type="datetime"
      placeholder="选择日期时间"
      align="right"
      
      :picker-options="pickerOptions1">
    </el-date-picker>
    </el-form-item>
        <el-form-item label="测试粉丝ID">
          <el-col :span="16">
          <el-input
            placeholder="null"
            v-model="fens_id"
            clearable>
          </el-input>
            <p>用测试粉丝帐号点公众号菜单 "粉丝导航" > "个人中心"。</p>
          </el-col>
          <el-col :span="4"><el-button type="primary" @click="ceshi">测试发送</el-button></el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="checkform(form)">确定</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
        
      </el-form>
    </div>
          <!-- 更换图片 -->
  <el-dialog
    title="选择封面"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <div>
      <p class="dialog_top">
        <span :class="PhotoGallery.select_type==0?'dialog_top_checked':''" @click="getPhotoGallery(0)">全部</span>
        <span :class="PhotoGallery.select_type==1?'dialog_top_checked':''" @click="getPhotoGallery(1)">通用</span>
        <span :class="PhotoGallery.select_type==2?'dialog_top_checked':''" @click="getPhotoGallery(2)">男频</span>
        <span :class="PhotoGallery.select_type==3?'dialog_top_checked':''" @click="getPhotoGallery(3)">女频</span>
      </p>
      <div class="imglist">
        <img :src=item.picurl alt="" v-for="(item,index) in PhotoGallery.photo_list" :key="index" @click="setOneGraphicurl(item.picurl)" >
      </div>
      <div class="getMore" @click="getMoreimg">加载更多...</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 更换图片 -->
        <!-- 更换标题 -->
  <el-dialog
    title="设置标题"
    :visible.sync="dialogVisible1"
    width="50%"
    :before-close="handleClose">
    <div>
      <el-form  label-width="80px">
      <el-form-item label="标题">
      <input type="text" v-model="titlevalue" class="title_input">
         <el-button type="success" @click="xuanze">选择</el-button>
      </el-form-item>
      <el-form-item label="链接地址" v-show="index!=-1">
          <el-col :span="16">
           <el-autocomplete
            class="inline-input"
            v-model="lianjie"
            :fetch-suggestions="querySearch"
            placeholder="请输入原文链接"
            @select="handleSelect"
          ></el-autocomplete>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="settitle">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 更换图片 -->



         <!-- 选择标题 -->
  <el-dialog
    title="选择标题"
    :visible.sync="dialogVisible2"
    width="50%"
    :before-close="handleClose">
    <div>
      <p class="dialog_top">
        <span :class="TitleLibrary.select_type==0?'dialog_top_checked':''" @click="getTitleLibrary(0)">全部</span>
        <span :class="TitleLibrary.select_type==1?'dialog_top_checked':''" @click="getTitleLibrary(1)">通用</span>
        <span :class="TitleLibrary.select_type==2?'dialog_top_checked':''" @click="getTitleLibrary(2)">男频</span>
        <span :class="TitleLibrary.select_type==3?'dialog_top_checked':''" @click="getTitleLibrary(3)">女频</span>
      </p>
      <div class="titlelist">
        <p v-for="(item,index) in TitleLibrary.title_list" :key="index" class="titletext" @click="setitem(item)">{{item.title}}</p>
      </div>
      <div class="getMore" @click="getMoretitle">加载更多...</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible2 = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 选择标题 -->
	</div>
</template>
<script>
import centerHeader from "../../../components/center-header";
export default {
  //组件私有数据（必须是function，而且要return对象类型）
  components: {
    centerHeader
  },
  data() {
    return {
      header: [{ title: "群发推广", path: "/home/Extension/newimgtext" }],
      form: {
        name: "",
        titleurl: "",
        send_type: "全部用户",
        send_time: ""
      },
      lianjie: "",
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      restaurants: [],
      fens_id: "",
      OneGraphic: {
        title: "",
        picurl: ""
      }, //first标题
      OneGraphicList: [], //次条list
      pickerOptions1: {
        shortcuts: [
          {
            text: "现在",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "10分钟后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 600 * 1000);
              picker.$emit("pick", date);
            }
          },
          {
            text: "1小时后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 1);
              picker.$emit("pick", date);
            }
          },
          {
            text: "2小时后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 2);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      pingjie: {},
      PhotoGallery: [
        {
          picurl: ""
        }
      ], //图片库
      TitleLibrary: [
        {
          title: "",
          type: ""
        }
      ],
      index: -1,
      titlevalue: "",
      queryitem: {},
      articles: [],
      parameter: {
        type: 0,
        page: 1
      }
    };
  },
  // watch(){
  //   form.send_time(val,old){
  //     console.log
  //   }
  // },
  methods: {
    getMoreimg() {
      let that = this;
      that.parameter.type = that.index;
      that.$utils.loadmore(
        that,
        {
          api: "/cp/v1/Customer/getPhotoGallery",
          parameter: that.parameter,
          oldArr: that.PhotoGallery
        },
        function(res) {
          if (res) {
            console.log(res);
          } else {
            that.$message.warning("没有数据啦");
            console.log(res);
          }
        },
        function(arr) {
          that.PhotoGallery = arr;
        }
      );
    },
    getMoretitle() {
      let that = this;
      that.parameter.type = that.index;
      that.$utils.loadmore(
        that,
        {
          api: "/cp/v1/Customer/getTitleLibrary",
          parameter: that.parameter,
          oldArr: that.TitleLibrary
        },
        function(res) {
          if (res) {
          } else {
            that.$message.warning("没有数据啦");
          }
        },
        function(arr) {
          that.TitleLibrary = arr;
        }
      );
    },
    settitle() {
      let that = this;
      that.dialogVisible1 = false;
      console.log(that.titlevalue);
      if (that.index == -1) {
        that.OneGraphic.title = that.titlevalue;
      } else {
        that.OneGraphicList[that.index].title = that.titlevalue;
        that.OneGraphicList[that.index].url = that.lianjie;
      }
    },
    setitem(item) {
      let that = this;
      that.titlevalue = item.title;
      that.dialogVisible2 = false;
    },
    settitlevalue() {
      this.titlevalue =
        this.index == -1
          ? this.OneGraphic.title
          : this.OneGraphicList[this.index].title;
      if (this.index != -1) {
        this.lianjie = this.OneGraphicList[this.index].url;
      }
    },
    xuanze() {
      let that = this;
      that.getTitleLibrary(0);
      that.dialogVisible2 = true;
    },
    getTitleLibrary(type) {
      let that = this;
      that.axios
        .post("/cp/v1/Customer/getTitleLibrary", {
          type: type
        })
        .then(res => {
          if (res.data.code == 200) {
            that.TitleLibrary = res.data.data;
          }
        });
    },
    //set图片
    setOneGraphicurl(url) {
      let that = this;
      if (that.index >= 0) {
        that.OneGraphicList[that.index].picurl = url;
      } else {
        that.OneGraphic.picurl = url;
      }
      that.dialogVisible = false;
    },
    //更换标题
    changetitle(type) {
      let that = this;
      that.index = type; //-1
      that.settitlevalue();
      that.dialogVisible1 = true;
    },
    //更换图片
    changeimg(type) {
      let that = this;
      if (type != -1) {
        that.index = type;
      }
      that.getPhotoGallery(0);
      this.dialogVisible = true;
    },
    //获取图片库
    getPhotoGallery(type) {
      let that = this;
      that.axios
        .post("/cp/v1/Customer/getPhotoGallery", {
          type: type
        })
        .then(res => {
          if (res.data.code == 200) {
            that.PhotoGallery = res.data.data;
          }
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //检查表单选项是否为空
    checkform(form) {
      let that = this;
      if (
        form.name == "" ||
        form.name == null ||
        form.send_time == "" ||
        form.send_time == null ||
        form.titleurl == "" ||
        form.titleurl == null
      ) {
        that.$message.error("请将信息输入完在提交!");
      } else {
        that.pingjie1();
        if (that.$route.query.index) {
          that.axios
            .post("/cp/v1/Customer/editCustomerMsg", {
              id: that.$route.query.index,
              d_id: JSON.parse(localStorage.userInfo).user_id,
              name: form.name,
              send_time: form.send_time,
              send_type: form.send_type == "全部用户" ? "0" : "1",
              customer: that.pingjie
            })
            .then(res => {
              if (res.data.code == 200) {
                that.$message.success("修改成功!");
                that.$router.go(-1);
              } else {
                console.log(res);
                that.$message.error("网络异常，请重试!");
              }
            });
        } else {
          that.axios
            .post("/cp/v1/Customer/setCustomerMsg", {
              d_id: JSON.parse(localStorage.userInfo).user_id,
              name: form.name,
              send_time: form.send_time,
              send_type: form.send_type == "全部用户" ? "0" : "1",
              customer: that.pingjie
            })
            .then(res => {
              if (res.data.code == 200) {
                that.$message.success("新建成功!");
                that.$router.go(-1);
              } else {
                that.$message.error("网络异常，请重试!");
              }
            });
        }
      }
    },
    pingjie1() {
      let that = this;
      that.OneGraphic.url = that.form.titleurl;
      var list = [that.OneGraphic];
      list = list.concat(that.OneGraphicList);
      that.pingjie = {
        msgtype: "news",
        news: {
          articles: list
        }
      };
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      let that = this;
      that.axios
        .post("/cp/v1/Customer/getPromoteList", {
          d_id: JSON.parse(localStorage.userInfo).user_id
        })
        .then(function(res) {
          that.restaurants = res.data.data;
          that.restaurants.forEach(item => {
            item.value = item.name;
          });
        });
    },
    handleSelect(item) {
      this.form.titleurl =
        "http://d" +
        JSON.parse(localStorage.userInfo).user_id +
        ".131452.com/#/setcookies/" +
        item.id;
    },
    //随机获取一组图文
    getOneGraphic(is) {
      let that = this;
      that.axios.post("/cp/v1/Customer/getOneGraphic").then(res => {
        if (res.data.code == 200) {
          if (is) {
            that.OneGraphicList.push(res.data.data);
          } else {
            that.OneGraphic = res.data.data;
          }
        } else {
          that.$message.error("网络异常，请刷新重试!");
        }
      });
    },
    ceshi() {
      let that = this;
      if (
        that.form.name == "" ||
        that.form.name == null ||
        that.form.send_time == "" ||
        that.form.send_time == null ||
        that.form.titleurl == "" ||
        that.form.titleurl == null ||
        that.fens_id == null ||
        that.fens_id == ""
      ) {
        that.$message.error("请将信息输入完在提交!");
      } else {
        that.pingjie1();
        that.axios
          .post("/cp/v1/Customer/testSend", {
            d_id: JSON.parse(localStorage.userInfo).user_id,
            customer: that.pingjie,
            user_id: that.fens_id
          })
          .then(res => {
            if (res.data.code == 200) {
              that.$message.success("测试成功!");
            } else {
              console.log(res);
              that.$message.error("网络异常，请重试!");
            }
          });
      }
    }
  },
  mounted() {},
  //生命周期钩子：组件实例完成创建之后调用
  created() {
    let that = this;
    this.loadAll();
    if (that.$route.query.index) {
      console.log(that.$route.query.index);
      that.axios
        .post("/cp/v1/Customer/getOneCustomerMsg", {
          id: 1
        })
        .then(res => {
          if (res.data.code==200) {
            that.queryitem = res.data.data;
          that.articles = JSON.parse(that.queryitem.customer).news.articles;
          that.form.name = that.queryitem.name;
          that.OneGraphic.title = that.articles[0].title;
          that.OneGraphic.picurl = that.articles[0].picurl;
          that.form.titleurl = that.articles[0].url;
          that.OneGraphicList = that.articles.slice(1);
          that.form.send_time = that.$utils.timestampToTime(
            that.queryitem.send_time
          );
          that.form.send_type =
            that.queryitem.send_type == 0 ? "全部用户" : "付费用户";
          }else{
            console.log(res);
            that.$message.error('网络异常，请刷新重试!');
          }
          
        });
      // that.queryitem = JSON.parse(that.$route.query.item);
      // that.articles = JSON.parse(that.queryitem.customer).news.articles;
      // that.form.name = that.queryitem.name;
      // that.OneGraphic.title = that.articles[0].title;
      // that.OneGraphic.picurl = that.articles[0].picurl;
      // that.form.titleurl = that.articles[0].url;
      // that.OneGraphicList = that.articles.slice(1);
      // that.form.send_time = that.$utils.timestampToTime(
      //   that.queryitem.send_time
      // );
      // that.form.send_type =
      //   that.queryitem.send_type == 0 ? "全部用户" : "付费用户";
    } else {
      that.getOneGraphic(false);
    }
  }
};
</script>
<style scoped>
.form {
  width: 50%;
  margin: 0 auto;
  font-size: 16px;
  color: #666;
  padding-top: 50px;
}
.template-msg-editor {
  border: #ddd 1px solid;
  border-radius: 4px;
  background: white;
  width: 70%;
  padding: 1% 3%;
  font-size: 14px;
}
.template-msg-editor > p {
  padding-top: 2%;
  padding-bottom: 2%;
  position: relative;
}
.inline-input {
  width: 100%;
}
.el-icon-edit {
  margin-left: 5px;
}
.one_img {
  width: 100%;
}
.one_p {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.el-icon-arrow-right {
  position: absolute;
  right: 0px;
  top: 5px;
}
.addci {
  width: 70%;
  padding: 1% 3%;
  padding-top: 2%;
  font-size: 14px;
  text-align: center;
}
.addci > span {
  cursor: pointer;
  color: #337ab7;
}
.addci > span:hover {
  text-decoration: underline;
}
.template-msg-editor > .list_p {
  display: flex;
  justify-content: space-between;
  height: 50px;
  padding-bottom: 10px;
  font-size: 14px;
  border-bottom: 1px solid #cccccc;
}
.template-msg-editor > .list_p:last-child {
  border: none;
}
.list_p > span:first-child {
  width: 80%;
  height: 100%;
}
.list_p > span:last-child {
  width: 20%;
}
.list_p > span > img {
  width: 100%;
  height: 100%;
  margin-bottom: 5px;
}
i {
  cursor: pointer;
}
.one_p_span {
  top: 2%;
  left: 0px;
  display: inline-block;
  position: absolute;
  height: 96%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.one_p_span > span {
  background: #ffffff;
  border: 1px solid #cccccc;
  display: inline-block;
  width: 20%;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 46%;
  left: 40%;
}
.one_p > .one_p_span {
  display: none;
}
.one_p:hover > .one_p_span {
  display: inline-block;
}
.list_span {
  display: inline-block;
  position: relative;
}
.list_span_span {
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.list_span_span > span {
  color: #ffffff;
  text-decoration: underline;
  display: inline-block;
  margin-left: 30%;
  margin-top: 25%;
  cursor: pointer;
}
.list_span > .list_span_span {
  display: none;
}
.list_span:hover > .list_span_span {
  display: inline-block;
}
.textred {
  color: red;
}
.dialog_top {
  padding: 10px 20px;
  background: #f5f5f5;
}
.dialog_top > span {
  color: #337ab7;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
}
.dialog_top > .dialog_top_checked {
  color: #ffffff;
  background: #337ab7;
}
.imglist {
  width: 100%;
  padding-top: 20px;
}
.imglist > img {
  width: 20%;
  height: 100px;
  margin: 0 10px;
  margin-bottom: 20px;
}
.title_input {
  width: 85%;
  padding-top: 6px;
  padding-bottom: 6px;
}
.titlelist {
  border: 1px solid #cccccc;
  margin-top: 10px;
  padding: 10px;
}
.titletext {
  margin-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 5px;
  cursor: pointer;
}
.titletext:hover {
  text-decoration: underline;
}
.textis {
  display: inline-block;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.getMore {
  width: 194px;
  height: 43px;
  margin: 10px auto;
  margin-bottom: 0px;
  border-radius: 10px;
  background: #f4f4f4;
  color: #666;
  text-align: center;
  line-height: 43px;
  cursor: pointer;
}
</style>
